CSS-Übung
Kopiere folgenden html-Code in das entsprechende Feld in deinem liveweave-Editor:
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>CSS-Übung</title>
</head>
<body>
<div id="header">
<h1>CSS-Übung</h1>
</div>
<div id="nav">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</div>
<div id="main">
<p></p>
</div>
<div id="footer">
</div>
</body>
</html>
]]>
Anschließend musst du noch den CSS-Code in das untere Feld kopieren:
<![CDATA[
#header {
background-color: yellow;
}
#nav {
background-color: pink;
position: absolute;
top: 80px;
left: 20px;
width: 100px;
height: 150px;
}
#main {
background-color: aqua;
height: 200px;
}
#footer {
background-color: red;
height: 50px;
}
]]>
Um die einzelnen Bereiche der Seite sichtbar zu machen, sind sie farbig markiert oder haben sie eine Höhe erhalten. Du kannst die Seite nun beliebig gestalten und dabei sowohl html- als auch CSS-Code verändern. Viel Spaß!